<template>
    <img ref="imgRef" @click="show" :src="props.src" :style="props.style" />
</template>
<script lang="ts" setup>
import { ref, defineProps, type StyleValue } from "vue"
import Views from "viewerjs"
import "viewerjs/dist/viewer.css"
const imgRef = ref<HTMLImageElement>()

const props = defineProps<{
    style?: StyleValue
    src: string
    source?: string
}>()

const show = (): void => {
    console.log(props.source ?? props.src)
    const v = new Views(imgRef.value as HTMLImageElement, {
        // 源图片链接
        url: () => props.source ?? props.src,
        // 启用模态背景墙，指定点击后不会关闭模态的背景墙
        backdrop: true,
        // 显示右上方的按钮
        button: true,
        // 工具栏
        toolbar: false,
        loop: false,
        // 启用内联模式
        inline: false,
        // 是否启动动画
        transition: true,
        // 是否显示导航栏
        navbar: false,
    })
    v.show()
    console.log(v)
}
</script>
